<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>会员主页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="cache-control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="wed, 26 Feb 1997 08:21:57 GMT">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/myInfo.css">
</head>
<body>
<nav class="shop">
    <ul>
        <li><img src="img/touxiang-icon.png"></li>
        <li>李密</li>
        <li>积分：<span>300</span></li>
    </ul>
</nav>
<article class="shop_info">
    <div>
        <ul>
            <a href="obligationDelete.html">
                <li class="num"><span><img src="img/pay.png"><sup>2</sup></span></li>
                <li>待付款</li>
            </a>
        </ul>
        <ul>
            <a href="obligationSend.html">
                <li class="num"><span><img src="img/send.png"><sup>2</sup></span></li>
                <li>待发货</li>
            </a>
        </ul>
        <ul>
            <a href="sendOrder.html">
                <li><img src="img/sendTo.png"></li>
                <li>已发货</li>
            </a>
        </ul>
        <ul>
            <a href="companyOrder.html">
                <li><img src="img/complay.png"></li>
                <li>已完成</li>
            </a>
        </ul>
    </div>
    <ul>
        <a href="everyOrder.html">
            <li><img class="inline-block" src="img/order.png"></li>
            <li>全部订单</li>
            <li><img src="img/right.png"></li>
        </a>
    </ul>
    <ul>
        <a href="index.html">
            <li><img style="width: 100%;"  src="img/shopping.png"></li>
            <li>我的购物车</li>
            <li><img src="img/right.png"></li>
        </a>
    </ul>
</article>
<footer class="goods">
    <p>商城首页</p>
    <p class="category"><span class="inline-block">=</span>产品分类</p>
    <p>会员中心</p>
</footer>
<ul class="classes" id="d2">
    <li><a>礼品定制</a></li>
    <li><a class="active">保健品</a></li>
    <li><a>化妆品</a></li>
    <li><a>日用品</a></li>
    <li><a>盆栽绿植</a></li>
    <li><a>原生产品</a></li>
</ul>
</body>
<script src="js/zepto.min.js"></script>
<script>
    var bH=window.screen.height, bW=window.screen.width, goods_h=$(".goods").height();
    goods_h = goods_h+10+"px";
    $(".goods").tap(function(){
        var isDisplay=$(".classes").css("display");
        if(isDisplay=="none"){
            $(".classes").css({
                bottom:goods_h ,
                display:"inline-block"
            });
        }else if(isDisplay=="inline-block"){
            $(".classes").css({
                bottom:0 ,
                display:"none"
            });
        }
    });
    $(".classes li").tap(function(){
        $(this).children("a").addClass("active");
        $(this).siblings().children("a").removeClass("active");
    });
    window.onclick=function(e){
        var e=e||window.event;
        var oD2=document.getElementById("d2");
        var target=e.srcElement||e.target;
        if(!oD2.contains(target)){
            $(".classes").css({
                bottom:0 ,
                display:"none"
            });
        }
    }


</script>
</html>